<template>

  <div class="common-layout" >
    <el-container>
      <el-header >
        <div class="shell"  v-for="(item, index) in XqyArr">
          <label for="button1" class="button" style="--i:0">景区介绍</label>
          <input type="radio" id="button1" name="page" checked>
          <div class="page" >
            <img :src="item.imgUrl" alt="" style="height: 840px;width: 840px;float: right;"class="product-image">
            <div class="page_content" >
              <h1>景区介绍:{{item.name}}</h1>
              <p>{{item.slogan}}</p>
              <span>
                   {{item.introduction}}
                </span>
            </div>
            <div v-if="follow == false " style="position: absolute;margin-left: 330px;margin-top: 15px;">
              <el-button @click="butScene(item.id)" style="width: 88px;position:relative;float:left;right: 270px;top: 10px" color="#a0cfff" class="follow" >收藏</el-button>
            </div>
            <div v-if="follow == true " style="position: absolute;margin-left: 330px;margin-top: 15px;">
              <el-button @click="butScene(item.id)" style="width: 88px;position: relative;float: left;right: 270px;top: 10px" color="#c8c9cc" class="unFollow">取消收藏</el-button>
            </div>
          </div>

          <label for="button2" class="button" style="--i:1">位置境域</label>
          <input type="radio" id="button2" name="page">
          <div class="page" >
            <img :src="item.imgUrl1" alt="" style="height: 840px;width: 840px;float: right;"class="product-image">
            <div class="page_content">
              <h1>位置境域</h1>
              <p>{{item.address}}</p>
              <span>{{item.landform}}
                </span>
            </div>
            <div v-if="follow == false " style="position: absolute;margin-left: 330px;margin-top: 15px;">
              <el-button @click="butScene(item.id)" style="width: 88px;position:relative;float:left;right: 270px;top: 10px" color="#a0cfff" class="follow" >收藏</el-button>
            </div>
            <div v-if="follow == true " style="position: absolute;margin-left: 330px;margin-top: 15px;">
              <el-button @click="butScene(item.id)" style="width: 88px;position: relative;float: left;right: 270px;top: 10px" color="#c8c9cc" class="unFollow">取消收藏</el-button>
            </div>
          </div>

          <label for="button3" class="button" style="--i:2">立刻购买</label>
          <input type="radio" id="button3" name="page">
          <div class="page" >
            <img :src="item.imgUrl2" alt="" style="height: 840px;width: 840px;float: right;"class="product-image">
            <div class="page_content">
              <h1>立刻购买</h1>
              <p>促销价格：
                ¥{{item.price}}起/人</p>
              <span>
                  <h3>出发城市：{{item.departure}}</h3>
                  <h3>往返交通：汽车</h3>
                  <h3>预订提醒：建议提前3天预订</h3>
              <h3>客服电话： 023-888888</h3>
            </span>
              <div class="booking-form">
                <label for="package-type">价格类型：
                  <select id="package-type">
                    <option value="standard">标准</option>
                    <option value="premium">高级</option>
                    <option value="deluxe">豪华</option>
                  </select>
                </label>
                <p class="price">成人单价：¥<span style="font-size: 20px;color: red">{{item.price}}</span></p>
                <label for="departure-time" class="date">住宿标准：
                  <select id="departure-time" type="datetime-local">
                    <option value="standard">标准标间</option>
                    <option value="premium">高级标间</option>
                    <option value="deluxe">豪华标间</option>
                  </select>
                </label>




                <el-button color="#626aef" :dark="isDark"

                           @click="dialogVisible=true"

                >立即购买</el-button>


              </div>
              <div >
              <span style="height: 100px;font-size: 15px;  ">
                1、成都中国游友悠旅社精心策划、集吃住行娱乐为一体的真纯玩系列旅游产品！2、{{item.name}}一站式游览。
                3、0自费，0购物，不进隐形购物店，不去购物景点。4、适合人群：不喜欢进购物店，吃住要求比较高，不愿意去藏寨和羌寨等购物景点的游客选择参加！
                5、行程有多酒店
              </span>
              </div>

            </div>
            <div v-if="follow == false " style="position: absolute;margin-left: 330px;margin-top: 15px;">
              <el-button @click="butScene(item.id)" style="width: 88px;position:relative;float:left;right: 270px;top: 10px" color="#a0cfff" class="follow" >收藏</el-button>
            </div>
            <div v-if="follow == true " style="position: absolute;margin-left: 330px;margin-top: 15px;">
              <el-button @click="butScene(item.id)" style="width: 88px;position: relative;float: left;right: 270px;top: 10px" color="#c8c9cc" class="unFollow">取消收藏</el-button>
            </div>
          </div>
        </div>

      </el-header>
      <el-main v-for="(item1, index) in XqyArr">
        <div class="block1"></div>
        <el-calendar v-model="value" />
        <div class="guide1">
          <img :src="item1.imgUrl3" alt="" style="height: 840px;width: 827px;float: right;"class="product-image">
          <img :src="item1.imgUrl4" alt="" style="height: 840px;width: 827px;"class="product-image">

        </div>
      </el-main>

    </el-container>

  </div>

  <div class="wrap7">
    <div class="box7">
      <div class="left7"></div>
      <div class="center7"><span>
                半票政策
            </span></div>
      <div class="right7">
        <P>1.60—69周岁老人，购买半票</P>
        <P>2.持成都市老年证十一、春节黄金周期间需购半票。</P>
        <P> 3.对6周岁（不含6周岁）-18周岁（含18周岁）未成年人实行半票。</P>
        <P>4.全日制大学本科及以下学历（不含成人教育）学生持本人学生证实行半票。</P>
      </div>
    </div>

    <div class="box7">
      <div class="left7">1、70岁以上老人，免票。

        2、持成都市老年证免票（十一、春节黄金周期间需购半票）。

        3、残疾人本人免票。

        4、盲人和重度肢体、智力、精神残疾人免票，可带一名陪护人员免票。

        5、6周岁以下（含6周岁）或身高1.3米以下（含1.3米）的儿童免票。

        6、役军人（含文职干部）免票。

        7、残疾军人免票。
      </div>
      <div class="center7"><span>
                优惠政策
            </span></div>
      <div class="right7"></div>
    </div>

    <div class="box7">
      <div class="left7"></div>
      <div class="center7"><span>
               新优待政策
            </span></div>
      <div class="right7">
        2018年10月1日起，对年满六十五周岁老年人凭身份证或者老年人优待证等有效证件享受免票政策；对不满六十五周岁老年人，在非国家法定节假日凭身份证或
        者老年人优待证等有效证件享受免票政策，在国家法定节假日凭身份证或者老年人优待
        证等有效证件享受门票半价优惠。
      </div>
    </div>

    <div class="box7">
      <div class="left7">网上预订：选定所需线路后直接在网站下订单，填写相关信息，提交订单。待客服审核通过订单后，可直接在线支付。

        线下预定：将您看中的旅游产品，以微信或QQ或在线聊天工具的方式，发给客服。待客服给您预定好位置后，即可支付定金。

        电话预订：拨打咨询电话028-87086644，客服帮助您完成预订信息的确认后，即可支付定金。
      </div>
      <div class="center7"><span>
                预定方式
            </span></div>
      <div class="right7"></div>
    </div>

    <div class="box7">
      <div class="left7"></div>
      <div class="center7"><span>
                费用包含
            </span></div>
      <div class="right7">
        <P>【交通】：全程正规空调旅游车，每人一个正座，确保车况良好，干净卫生，司机服务态度好。</P>
        <P>【住宿】：全程入住酒店双人间，景区酒店环保，不提供一次性洗漱用品，请客人提前自备，高原地区，请游客理解.（报价均以一个床位计价，以下均为参考酒店，如游客人数为单数而又无法拼房，则需要补房差)</P>

        </div>
    </div>
  </div>




  <!--弹窗卡片-->
  <el-dialog :title="dialogTitle" style="width:1000px;padding:40px;" v-model="dialogVisible">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="姓名">
            <el-input placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input placeholder="请输入年龄"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="保险">
            <el-select placeholder="请选择">
              <el-option label="放弃投保" value="10"></el-option>
              <el-option label="国内旅游意外险" value="20"></el-option>


              <el-option v-for="item in levelOptions" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="性别">
            <el-radio-group>
              <el-radio label="1" border style="margin: 0;">男</el-radio>
              <el-radio label="0" border>女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="30">
        <el-col :span="20">
          <el-form-item label="身体状况说明">
            <el-select placeholder="请选择">
              <el-option label="身体健康、适宜出行" value="10"></el-option>
              <el-option label="心血管疾病患者（如严重高血压、心功能不全、心肌缺氧、心肌梗塞等人）" value="20"></el-option>
              <el-option label="脑血管疾病患者（如脑栓塞、脑出血、脑肿瘤等病人）" value="20"></el-option>
              <el-option label="孕妇及行动不便者" value="20"></el-option>
              <el-option label="精神病患者（如癫痫及各种精神病人）" value="20"></el-option>
              <el-option v-for="item in levelOptions" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>


      </el-row>
    </el-form>
    <template #footer>
      <el-button>取消</el-button>
      <el-button type="primary">保存</el-button>
    </template>
  </el-dialog>





</template>
<script setup >

import {onMounted, ref} from 'vue';
import {useRoute} from 'vue-router';
import axios from 'axios';
import {ElMessage} from 'element-plus';
import qs from "qs";

const id = ref();
const XqyArr = ref([]);
// 用户名示例（实际应用中应从登录状态中获取）
const user  = ref(getUser());
const uid = user.value.id;

onMounted(() => {
  const route = useRoute();
  id.value = route.query.id;
  console.log(id.value);
  loadXqy();
  getSceneFollow(id.value);
});

const loadXqy = () => {

  axios.get(BASE_URL+"/yyt/scene/selectId/"+id.value).then((response) => {
    if (response.data.code === 2000) {
      XqyArr.value = response.data.data;
    } else {
      ElMessage.error('数据加载失败');
    }
  }).catch((error) => {
    console.error('请求错误:', error);
    ElMessage.error('请求失败，请稍后再试');
  });
};
const dialogVisible = ref();


//保存是否关注
const follow = ref('');
//定义对象保存取消收藏数据
const sceneIdData = ref({id:'',fid:''})
//获取当前导游是否被关注
const getSceneFollow = (id)=>{
  sceneIdData.value.id=id;
  sceneIdData.value.fid=uid;
  let data = qs.stringify(sceneIdData.value);
  axios.post(BASE_URL+'/yyt/like/scene/follow',data).then((response)=>{
    if (response.data.code==2000){
      follow.value = response.data.data;
    }else {
      ElMessage.error("错误");
    }
  })
}
//定义决定是否关注/取消关注的方法
const butScene = (id) =>{
  if (follow.value ==true){
    deleteFollowScene(id);
    follow.value = !follow.value;
  }else if (follow.value==false){
    updateFollowScene(id);
    follow.value = !follow.value;
  }
}
//取消收藏连接后端方法
const deleteFollowScene = (id)=>{
  sceneIdData.value.id=id;
  sceneIdData.value.fid=uid;
  let data = qs.stringify(sceneIdData.value);
  axios.post(BASE_URL+'/yyt/like/scene/delete/',data).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success("取消收藏成功");
    }else {
      ElMessage.error("操作失败");
    }
  })
}
// 收藏连接后端方法
const updateFollowScene = (id)=>{
  sceneIdData.value.id=id;
  sceneIdData.value.fid=uid;
  let data = qs.stringify(sceneIdData.value);
  axios.post(BASE_URL+'/yyt/like/scene/update/',data).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success("收藏成功");
    }else {
      ElMessage.error("操作失败");
    }
  })
}
</script>




<style scoped>

.wrap7{
  width: 1000px;
  position: relative;
  top: 100px;

  margin-left: 300px;
}
.wrap7::after{
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  width: 5px;
  z-index: -999;
  height: 1000px;
  background-color: rgba(255,255,255,.5);
}
.box7{
  position: relative;
  width: 100%;
  height: 140px;
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;

}
.left7,.right7{
  position: relative;
  width: 40%;
  height: 150px;
  border-radius: 15px;
  border: 10px;
  color: black;

}
.box7:nth-child(even) .left7{
  background-color: rgba(255,255,255,.4);
  box-shadow: 0 0 10px rgba(0,0,0,.3);
}
.box7:nth-child(odd) .right7{

  background-color: rgba(255,255,255,.4);
  box-shadow: 0 0 10px rgba(0,0,0,.3);
}
.center7{
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center7>span{
  width: 120px;
  border-radius: 10px;
  text-align:center;
  font: 900 24px '';
  line-height: 50px;
  background-color: #fff;
}
.unFollow{
  color: #606266;
}
.follow{
  color: #fff;
}

















.booking-form {
  width: 700px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #fff9c4;
  color: black;
}
.booking-form .price {
  float: right;
  font-weight: bold;
  color:black;
  margin: 1px;
  font-size: 20px;
  height: 21px;
}
.booking-form .date {
  float: left;
  margin: 0;
  height: 20px;
  font-size: 20px;

}
.booking-form label {
  font-size: 20px;
  display: block;
  margin-bottom: 10px;
}
.booking-form input[type="text"] {
  width: 100%;
  height: 30px;
  padding: 6px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.booking-form button {
  width: 60%;
  height: 40px;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  line-height: 40px;
  border: none;
  cursor: pointer;
  margin: 10px;
}
.booking-form .share {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 50px;
  height: 50px;
  background-color: #f7f7f7;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}






.guide1{
  margin: 15px;
}
.button7 {
  color: chocolate;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;

}


.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}

.example-pagination-block .example-demonstration {
  margin-bottom: 20px;
}

.block1 {
  width: 1310px;
  height: 800px;
  background-color: #B0E0E6;
}

* {
  padding: 0;
  margin: 0;
}

body {
  background-color: rgb(0, 0, 0);
}

.shell {
  width: auto;
  height: auto;
  background-color: #000;

  margin: 2px;
}

.page {
  transform: translateX(-110%);
  position: absolute;
  width: 45%;
  height: 90%;
  transition: .5s;
  background-size: cover;
}

.button {
  display: block;
  width: 9%;
  color: #fff;
  font-size: 30px;
  border-bottom: #fff solid 4px;
  text-align: center;
  position: absolute;
  bottom: 1px;
  margin: 15px;
  left: calc(50% + (var(--i) * 17%));

  z-index: 999;
  transition: .3s;
}

.page_content {
  box-sizing: border-box;
  height: 100%;
  padding: 50px;
  color: #FFF;
  position: absolute;
  left: 100%;
  display: none;
  animation-name: fade;
  animation-duration: .7s;
  animation-iteration-count: 1;
  opacity: 1;
}
@keyframes fade{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 0;
    transform: translateY(-50px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px);
  }
}
input{
  display: none;
}
input:checked+.page{
  transform: translateX(0px);
  transition: .4s;
}
input:checked+.page .page_content{
  width: 100%;
  display: block;
}
.page:nth-child(3){

}

.page:nth-child(3) .page_content{
  background-color: rgb(185,130,130);
}

.page:nth-child(6){

}
.page:nth-child(6) .page_content{
  background-color: rgb(173,170,226);
}

.page:nth-child(9){

}
.page:nth-child(9) .page_content{
  background-color: rgb(236,180,110);
}
.page h1{
  font-size: 70px;
}
.page p{
  font-size: 30px;
  padding: 10px;
  background-color: rgba(0, 0, 0, .3);
  border-radius: 10px;
  margin: 30px 0;
}
.page span{
  font-size: 26px;
  letter-spacing: 2px;
  color: rgb(56, 56, 56);
}
label:hover{
  cursor: pointer;
  border-bottom: solid 4px rgb(35, 35, 35);
}
</style>
